<!-- 1 脚本 -->
<script lang='ts' setup name='index'>
import { ref, reactive } from 'vue';
const tableData = ref<Array<any>>([

  { username: 'admin', dept: '研发', host: '127.0.0.1', browser: 'Chrome', os: "Linux" },
  { username: 'admin', dept: '研发', host: '127.0.0.1', browser: 'Chrome', os: "Linux" },
  { username: 'admin', dept: '研发', host: '127.0.0.1', browser: 'Chrome', os: "Linux" },
  { username: 'admin', dept: '研发', host: '127.0.0.1', browser: 'Chrome', os: "Linux" },
  { username: 'admin', dept: '研发', host: '127.0.0.1', browser: 'Chrome', os: "Linux" },
  { username: 'admin', dept: '研发', host: '127.0.0.1', browser: 'Chrome', os: "Linux" },
  { username: 'admin', dept: '研发', host: '127.0.0.1', browser: 'Chrome', os: "Linux" },
  { username: 'admin', dept: '研发', host: '127.0.0.1', browser: 'Chrome', os: "Linux" },
  { username: 'admin', dept: '研发', host: '127.0.0.1', browser: 'Chrome', os: "Linux" },
  { username: 'admin', dept: '研发', host: '127.0.0.1', browser: 'Chrome', os: "Linux" }


])


const pageInfo = reactive({
  current: 1,
  size: 10,
  total: 0
})




function loadData() {
  console.log('pageInfo', pageInfo)

  let result:Array<any> = []

  for(let i = 0 ;i<pageInfo.size;i++){
    result.push({ username: `admin${pageInfo.current}1`, dept: '研发' + pageInfo.current, host: '127.0.0.1', browser: 'Chrome', os: "Linux" })
  }


  tableData.value = result 
}

</script>


<!-- 2 模板 -->
<template>


  <el-table :data="tableData">
    <el-table-column type="index" label="序号" width="120"></el-table-column>
    <el-table-column prop="username" label="登录名称"></el-table-column>
    <el-table-column prop="dept" label="登录部门"></el-table-column>
    <el-table-column prop="host" label="主机"></el-table-column>
    <el-table-column prop="browser" label="浏览器"></el-table-column>
    <el-table-column prop="os" label="操作系统"></el-table-column>
  </el-table>



  <!-- 

  background 
  layout:  组件布局，子组件名用逗号分隔
   -->

  <el-pagination background layout="total, sizes, prev, pager, next, jumper" 
  v-model:current-page="pageInfo.current"
    v-model:page-size="pageInfo.size" 
    :page-sizes="[10, 15]"
    :total="1000" @size-change="loadData" @current-change="loadData" />

</template>


<!-- 3 样式 -->
<style scoped></style>